@use '../variables';
@use '../../../styles/mixins';

$block: '.#{variables.$ns}switch';

#{$block} {
    position: relative;

    &__control {
        opacity: 0;
        cursor: pointer;
    }

    &__indicator {
        display: inline-block;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            inset: 0;

            background-color: var(--g-color-base-generic-medium);
            transition: background 0.1s linear;
        }

        &::after {
            content: '\00a0';
            visibility: hidden;
        }
    }

    &__slider {
        position: absolute;
        content: '';
        border-radius: 50%;
        background-color: var(--g-color-base-background);
        transition: transform 0.15s ease-out;
    }

    &__outline {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        background: none;
        pointer-events: none;
    }

    &__control:focus-visible + &__outline {
        @include mixins.focus-outline();
    }

    &_loading {
        #{$block}__slider::after {
            content: '';
            position: absolute;
            box-sizing: border-box;

            border-radius: 50%;

            inset-inline-start: 2px;
            inset-block-start: 2px;

            border-color: var(--g-color-base-generic-accent);
            border-style: solid;
            border-block-start-color: transparent;

            animation: #{variables.$ns}spin 1s linear infinite;

            @media (prefers-reduced-motion: reduce) {
                animation: none;
            }
        }
    }

    &_size {
        &_s {
            #{$block}__indicator,
            #{$block}__indicator::before,
            #{$block}__outline {
                width: 28px;
                height: 16px;
                border-radius: 10px;
            }

            #{$block}__slider {
                inset-block-start: 2px;
                inset-inline-start: 2px;
                width: 12px;
                height: 12px;

                &::after {
                    width: 8px;
                    height: 8px;
                    border-width: 2px;
                }
            }
        }

        &_m {
            #{$block}__indicator,
            #{$block}__indicator::before,
            #{$block}__outline {
                width: 36px;
                height: 20px;
                border-radius: 10px;
            }

            #{$block}__slider {
                inset-block-start: 2px;
                inset-inline-start: 2px;
                width: 16px;
                height: 16px;

                &::after {
                    width: 12px;
                    height: 12px;
                    border-width: 2px;
                }
            }

            #{$block}__text {
                margin-block-start: 3px;
            }
        }

        &_l {
            #{$block}__indicator,
            #{$block}__indicator::before,
            #{$block}__outline {
                width: 42px;
                height: 24px;
                border-radius: 12px;
            }

            #{$block}__slider {
                inset-block-start: 3px;
                inset-inline-start: 3px;
                width: 18px;
                height: 18px;

                &::after {
                    width: 14px;
                    height: 14px;
                    border-width: 2px;
                }
            }

            #{$block}__text {
                margin-block-start: 4px;
            }
        }
    }

    &:hover {
        #{$block}__indicator::before {
            background-color: var(--g-color-base-generic-medium-hover);
        }
    }

    &_checked &__slider {
        --_--translate-x: calc(100% * var(--g-flow-direction));
        transform: translateX(var(--_--translate-x));
    }

    &_checked {
        &#{$block}_loading {
            #{$block}__slider::after {
                border-color: var(--g-color-base-brand);
                border-block-start-color: transparent;
            }
        }
    }

    &_checked,
    &_checked:hover {
        #{$block}__indicator::before {
            background-color: var(--g-color-base-brand);
        }
    }

    &_disabled {
        #{$block}__indicator::before {
            background-color: var(--g-color-base-generic-accent-disabled);
        }

        &#{$block}_checked {
            #{$block}__indicator::before {
                background-color: var(--g-color-base-brand);
                opacity: 0.5;
            }
        }

        #{$block}__slider {
            &::after {
                opacity: 0.5;
            }
        }
    }
}

@keyframes #{variables.$ns}spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
